﻿@{
    ViewBag.Title = "购物车";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale= 1.0, initial-scale= 1.0">
    <link href="~/Content/Style/conmon.css" rel="stylesheet" type="text/css">
    <link href="~/Content/fonts/iconfont.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
    <!-- Include the Swiper library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Swiper JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>

    @*jqueryAlert提示框*@
    <link href="~/Content/alert/css/alert.css" rel="stylesheet" />
    <script src="~/Content/alert/js/alert.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>
        .rating-wrapper {
            margin-bottom: 60px;
        }

        .Choice.active i {
            color: #FF6700
        }

        .AllChoice {
            overflow: hidden;
            padding: 10px 10px 3px;
            border-bottom: 1px solid #ddd;
        }

        .rating-wrapper .rating-item {
            display: flex;
            border-bottom: 1px solid rgba(7, 17, 27, 0.1);
            position: relative;
        }

            .rating-wrapper .rating-item .del {
                bottom: 22px;
                right: 12px;
                position: absolute;
            }

            .rating-wrapper .rating-item .avatar {
                margin-right: 12px;
                padding-right: 12px;
                width: 96%;
                display: flex;
            }

                .rating-wrapper .rating-item .avatar .Choice {
                    display: inline-block;
                    line-height: 120px;
                    vertical-align: top;
                    padding-left: 4px;
                    padding-right: 4px;
                }

                    .rating-wrapper .rating-item .avatar .Choice i {
                        font-size: 28px;
                        color: #f3f5f7;
                    }

                    .rating-wrapper .rating-item .avatar .Choice.active i {
                        color: #FF6700
                    }

            .rating-wrapper .rating-item .content_sum {
                padding: 20px 0;
                position: relative;
                flex: 1;
            }

                .rating-wrapper .rating-item .content_sum .name {
                    margin-bottom: 4px;
                    line-height: 12px;
                    font-size: 10px;
                    color: rgb(7, 17, 27);
                }

                .rating-wrapper .rating-item .content_sum .star-wrapper {
                    margin-bottom: 6px;
                    font-size: 0;
                }

                    .rating-wrapper .rating-item .content_sum .star-wrapper .star {
                        display: inline-block;
                        margin-right: 6px;
                        vertical-align: top;
                    }

                    .rating-wrapper .rating-item .content_sum .star-wrapper .delivery {
                        display: inline-block;
                        vertical-align: top;
                        line-height: 12px;
                        font-size: 10px;
                        color: rgb(147, 153, 159);
                    }

                .rating-wrapper .rating-item .content_sum .describe {
                    margin-top: 5px;
                    line-height: 18px;
                    color: rgba(0,0,0,.54);
                    font-size: 12px;
                }

                .rating-wrapper .rating-item .content_sum .recommend {
                    line-height: 16px;
                    font-size: 0;
                }

                    .rating-wrapper .rating-item .content_sum .recommend .icon-thumb_up,
                    .rating-wrapper .rating-item .content_sum .recommend .item {
                        display: inline-block;
                        margin: 0 8px 4px 0;
                        font-size: 9px;
                    }

                    .rating-wrapper .rating-item .content_sum .recommend .icon-thumb_up {
                        color: rgb(0, 160, 220);
                    }

                    .rating-wrapper .rating-item .content_sum .recommend .item {
                        padding: 0 6px;
                        border: 1px solid rgba(7, 17, 27, 0.1);
                        border-radius: 1px;
                        color: rgb(147, 153, 159);
                        background: #fff
                    }

        .content .price {
            font-weight: 700;
            line-height: 24px;
        }

            .content .price .now {
                margin-right: 8px;
                font-size: 14px;
                color: #ff6000;
            }

            .content .price .old {
                text-decoration: line-through;
                font-size: 10px;
                color: rgb(147, 153, 159);
            }

        footer .footer_box {
            height: 100%;
        }

            footer .footer_box .footer_li.flex {
                flex: 0 0 60%;
                background-color: #FF6700;
            }

                footer .footer_box .footer_li.flex .orderText {
                    color: #fff;
                    line-height: 56px;
                }

        .footer_li {
            height: 56px;
            line-height: 56px;
        }

            .footer_li:nth-child(1) {
                background-color: #fff;
                color: #B5B5B5;
            }

        footer .footer_box .footer_li:nth-child(1) span {
            color: #FF5722;
            font-size: 20px;
        }

        .footer_li:nth-child(2) {
            background-color: #F4F4F4;
        }

            .footer_li:nth-child(2) a {
                color: #333333;
            }

        .footer_li:nth-child(3) {
            background-color: #F4F4F4;
        }

            .footer_li:nth-child(3) a {
                color: #333333;
            }

        .footer_li:nth-child(4) {
            background-color: #FF6700;
        }

            .footer_li:nth-child(4) a {
                color: #fff;
            }

        .quantity {
            display: inline-block;
            vertical-align: top;
            width: 30px;
            margin-top: 3px;
            text-align: center;
        }

        .headter {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            background-color: #fff;
        }

        .rating-item a {
            width: 100%;
        }

        .item-left {
            flex: 128px 0 0;
        }

        .content_sum {
            flex: 1;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="rating-wrapper content">
            <div class="headter">
                <div class="AllChoice">
                    <div style="float:left;margin-right:20px;"><div class="Choice" :class="{'active':activeAllFaL}" v-on:click="activeAll()"><i class="iconfont icon-dingdanzhuangtai-yiwancheng"></i>全选</div></div>
                    @*<div style="float:left;"><div class="Choice" v-on:click="activeAll(false)">取消全选</div></div>*@
                    <div style="float:right;" v-on:click="DeleteAll(CarIDList)">批量删除</div>
                </div>
            </div>
            <ul style="margin-top:70px;">
                <li class="rating-item" v-for="item in ShoppingCart">
                    <a href="javascript:;">
                        <div class="avatar">
                            <div class="item-left">
                                <div class="Choice" :class="{'active':item.active}" v-on:click="selectedProduct(item)"><i class="iconfont icon-dingdanzhuangtai-yiwancheng"></i></div>
                                <img width="80" height="80" :src="ChangeDishesPic(item.DishesPicSmall)" style="margin-top:20px;" v-on:click="DishsDetails(item)">
                            </div>
                            <div class="content_sum" style="display: inline-block;vertical-align: top;padding-left:12px;">
                                <h1 class="title" style="font-weight: bold;" v-on:click="DishsDetails(item)">{{item.DishesNmae}}</h1>
                                <p class="describe">{{Describe(item.DishesTxt)}}</p>
                                <div class="price">
                                    <span class="now">￥{{item.DishesPay}}</span><span class="old">￥{{item.DishesMon}}</span>
                                </div>
                                <div style="font-size:18px;" class="number">
                                    <i class="iconfont icon-jian" style="font-size:24px;" v-on:click="Number(item,-1)"></i>
                                    <input type="type" name="name" value="" v-model="item.Num" class="quantity" v-on:change="UpdateNum(item)" />
                                    <i class="iconfont icon-tianjia" style="font-size:24px;" v-on:click="Number(item,1)"></i>
                                </div>
                            </div>
                        </div>
                        <div style="font-size:18px;" class="del">
                            <i class="iconfont icon-delIcon" style="font-size:22px;color: #B5B5B5;" v-on:click="DeleteCar(item)"></i>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <footer>
            <div class="footer_box">
                <div class="footer_li">
                    金额:<span>{{totaMoney}}</span>
                </div>
                <div class="footer_li" style="border-right: 1px solid gainsboro;">
                    <a href="/Home/Index">
                        <span>首页</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Classification/Index">
                        <span>继续购物</span>
                    </a>
                </div>
                <div class="footer_li" v-on:click="PlacingOrder()">
                    <a href="#">
                        <span>选好了</span>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>

    <script>
        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    ShoppingCart: '',
                    ShoppingCartCount: 0,
                    activeAllFaL: false,
                    totaMoney: 0,
                    CarIDList: '',
                    NumList: '',
                    activeCount: 0,
                    DisheNameList: '',
                    DishesPayList: '',
                    DisheIDList: '',
                };
            },
            created() {
                this.GetList();
            },
            methods: {
                GetList() {
                    $.ajax({
                        url: "/ShoppingCart/Get_Order_Dishes_ShoppingCar",
                        type: "POST",
                        dataType: "json",
                        data: { OperID: 0, YZM: '', RETID: 1 },
                        success: function (data) {
                            if (data.BS == 1) {
                                //console.log(data);
                                vm.ShoppingCart = data.rows;
                                vm.ShoppingCartCount = data.total;
                            }
                        }
                    });
                },
                Number(item, a) {
                    if (a > 0) {
                        item.Num++;
                    }
                    if (a < 0) {
                        item.Num--;
                        if (item.Num < 1) {
                            item.Num = 1;
                        }
                    }
                    this.UpdateNum(item)
                },
                selectedProduct(item) {
                    var _this = this;
                    if (typeof item.active == 'undefined') {
                        this.$set(item, "active", true)
                    } else {
                        item.active = !item.active;
                    }
                    if (item.active == true) {
                        _this.activeCount += 1;
                    }
                    else {
                        _this.activeCount -= 1;
                    }
                    if (_this.activeCount == _this.ShoppingCartCount) {
                        _this.activeAllFaL = true;
                    }
                    else {
                        _this.activeAllFaL = false;
                    }
                    this.AmountCalculation();
                    this.CarIDCountList();
                    this.DisheIDCountList();
                    this.NumCountList();
                    this.DisheNameCountList();
                    this.DishesPayCountList();
                },
                activeAll() {
                    var _this = this;
                    if (_this.ShoppingCart != "") {
                        var FaLg = false;
                        if (_this.activeAllFaL == false) {
                            FaLg = true;
                        }
                        _this.activeCount = 0;
                        _this.ShoppingCart.forEach(function (item, index) {
                            //console.log(item);
                            if (typeof item.active == 'undefined') {
                                _this.$set(item, "active", FaLg)
                            } else {
                                item.active = FaLg;
                            }
                            if (item.active == true) {
                                _this.activeCount += 1;
                            }
                            else {
                                _this.activeCount -= 1;
                                if (_this.activeCount < 1) {
                                    _this.activeCount = 0;
                                }
                            }
                            if (_this.activeCount == _this.ShoppingCartCount) {
                                _this.activeAllFaL = true;
                            }
                            else {
                                _this.activeAllFaL = false;
                            }
                        });
                        this.AmountCalculation();
                        this.CarIDCountList();
                        this.DisheIDCountList();
                        this.NumCountList();
                        this.DisheNameCountList();
                        this.DishesPayCountList();
                    }
                    else {
                        jqueryAlert({
                            'content': '至少有一个商品!'
                        });
                    }
                },
                AmountCalculation() {
                    var _this = this;
                    _this.totaMoney = 0;
                    _this.ShoppingCart.forEach(function (item, index) {
                        if (item.active) {
                            _this.totaMoney += item.Num * item.DishesPay;
                        }
                    });
                },
                CarIDCountList() {
                    var _this = this;
                    _this.CarIDList = '';
                    _this.ShoppingCart.forEach(function (item, index) {
                        if (item.active) {
                            _this.CarIDList = _this.CarIDList + "," + item.CarID;
                        }
                    });
                },
                DisheIDCountList() {
                    var _this = this;
                    _this.DisheIDList = '';
                    _this.ShoppingCart.forEach(function (item, index) {
                        if (item.active) {
                            _this.DisheIDList = _this.DisheIDList + "," + item.DishesID;
                        }
                    });
                },
                NumCountList() {
                    var _this = this;
                    _this.NumList = '';
                    _this.ShoppingCart.forEach(function (item, index) {
                        if (item.active) {
                            _this.NumList = _this.NumList + "," + item.Num;
                        }
                    });
                },
                DisheNameCountList() {
                    var _this = this;
                    _this.DisheNameList = '';
                    _this.ShoppingCart.forEach(function (item, index) {
                        if (item.active) {
                            _this.DisheNameList = _this.DisheNameList + "," + item.DishesNmae;
                        }
                    });
                },
                DishesPayCountList() {
                    var _this = this;
                    _this.DishesPayList = '';
                    _this.ShoppingCart.forEach(function (item, index) {
                        if (item.active) {
                            _this.DishesPayList = _this.DishesPayList + "," + item.DishesPay;
                        }
                    });
                },
                ChangeDishesPic(Pic) {
                    if (Pic == "" || Pic == null) {
                        Pic = "../../Content/images/testImages/暂无图片.jpg" //后台图片为空,设置为默认图片
                    }
                    return Pic;
                },
                //单个商品删除
                DeleteCar(item) {
                    if (item.CarID != "") {
                        var dialog = jqueryAlert({
                            'title': '确认提示',
                            'content': "是否确认删除<font color='Red' size='3'>" + item.DishesNmae + "</font>这条数据!",
                            'modal': true,
                            'buttons': {
                                '取消': function () {
                                    dialog.close();
                                },
                                '确定': function () {
                                    $.ajax({
                                        url: "/ShoppingCart/Order_ShoppingCar_Del",
                                        type: "POST",
                                        dataType: "json",
                                        data: { CarID: item.CarID, YZM: '', RETID: 1 },
                                        success: function (data) {
                                            if (data.BS == 1) {
                                                setTimeout(function () { window.location.reload(); }, 500);
                                                jqueryAlert({
                                                    'content': data.Msg
                                                })
                                            }
                                            else {
                                                jqueryAlert({
                                                    'content': '删除失败' + data.Msg
                                                })
                                            }
                                        }
                                    });
                                    dialog.close();
                                }
                            }
                        })
                    }
                    else {
                        jqueryAlert({
                            'content': '删除出错，请检查'
                        });
                    }
                },
                //商品批量删除
                DeleteAll(CarIDList) {
                    if (CarIDList != "") {
                        var dialog = jqueryAlert({
                            'title': '确认提示',
                            'content': "是否确认批量删除这几条数据!",
                            'modal': true,
                            'buttons': {
                                '取消': function () {
                                    dialog.close();
                                },
                                '确定': function () {
                                    $.ajax({
                                        url: "/ShoppingCart/Order_ShoppingCar_Del",
                                        type: "POST",
                                        dataType: "json",
                                        data: { CarID: CarIDList, YZM: '', RETID: 1 },
                                        success: function (data) {
                                            if (data.BS == 1) {
                                                setTimeout(function () { window.location.reload(); }, 500);
                                                jqueryAlert({
                                                    'content': data.Msg
                                                })
                                            }
                                            else {
                                                jqueryAlert({
                                                    'content': '删除失败' + data.Msg
                                                })
                                            }
                                        }
                                    });
                                    dialog.close();
                                }
                            }
                        })
                    }
                    else {
                        jqueryAlert({
                            'content': '请确保选择一条数据!'
                        });
                    }
                },
                UpdateNum(item) {
                    if (item.CarID != "" && item.Num != "") {
                        $.ajax({
                            url: "/ShoppingCart/Order_ShoppingCar_Update",
                            type: "POST",
                            dataType: "json",
                            data: { CarID: item.CarID, Num: item.Num, YZM: '', RETID: 1 },
                            success: function (data) {
                                if (data.BS == 1) {
                                    jqueryAlert({
                                        'content': data.Msg
                                    })
                                }
                                else {
                                    jqueryAlert({
                                        'content': '更新失败' + data.Msg
                                    });
                                }
                            }
                        });
                    }
                    else {
                        jqueryAlert({
                            'content': '更新失败，请检查'
                        })
                    }
                    this.AmountCalculation();
                    this.NumCountList();
                },
                DishsDetails(item) {
                    window.location.href = '/Classification/Summary?id=' + item.DishesID;
                },
                Describe(item) {
                    if (item.length > 35) {
                        item = item.substr(0, 35) + " ...";
                    }
                    return item;
                },
                PlacingOrder() {
                    this.CarIDList = this.CarIDList.substr(1, this.CarIDList.length - 1);
                    this.DisheIDList = this.DisheIDList.substr(1, this.DisheIDList.length - 1);
                    this.NumList = this.NumList.substr(1, this.NumList.length - 1);
                    this.DisheNameList = this.DisheNameList.substr(1, this.DisheNameList.length - 1);
                    this.DishesPayList = this.DishesPayList.substr(1, this.DishesPayList.length - 1);
                    //console.log(this.CarIDList);
                    //console.log(this.DisheIDList);
                    //console.log(this.NumList);
                    //console.log(this.DisheNameList);
                    //console.log(this.DishesPayList);

                    //组合需要传参的数据
                    if (this.CarIDList != null && this.CarIDList != "" && this.DisheIDList != null && this.DisheIDList != "" && this.NumList != null && this.NumList != "") {
                        var AccID = this.ShoppingCart[0].UserID;
                        //console.log(AccID);
                        var postData = {
                            WaltID: '', //钱包ID
                            ShopInfo: '',   //商户信息
                            CarIDListArr: this.CarIDList,   //购物车ID数组
                            DishListArr: this.DisheIDList,    //购物车商品ID数组
                            CountArrs: this.NumList,    //购物车商品数量数组，对应商品ID
                            DisheNameArr: this.DisheNameList,        //商品名称集合
                            DishesPayArr: this.DishesPayList,      //商品价格集合
                            totaMoney: this.totaMoney       //购物车商品总额
                        };
                        $.post('/Shop/saveOrderInfo', postData).success(function (resp) {
                            if (resp == "1") {
                                window.location.href = "/Order/Index?shopnumber=" + AccID;
                            } else {
                                jqueryAlert({
                                    'content': resp
                                })
                            }
                        });//主要用于将订单信息保存至session
                    }
                    else {
                        $.post('/Shop/cuow', postData).success(function (resp) {
                            jqueryAlert({
                                'content': resp
                            })
                        })
                    }
                },

            }
        });
    </script>
</body>
</html>
